import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator
} from '../../components/ui/command';
import { Button } from '../../components/ui/button';

const meta: Meta<typeof Command> = {
  title: 'UI/Command',
  component: Command,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Command>;

export const Default: Story = {
  render: () => (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="输入命令..." />
      <CommandList>
        <CommandEmpty>未找到结果</CommandEmpty>
        <CommandGroup heading="建议">
          <CommandItem>
            <span>日历</span>
            <CommandShortcut>⌘K</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <span>搜索</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <span>设置</span>
            <CommandShortcut>⌘O</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="帮助">
          <CommandItem>
            <span>文档</span>
          </CommandItem>
          <CommandItem>
            <span>API参考</span>
          </CommandItem>
          <CommandItem>
            <span>联系支持</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  ),
};

export const WithDialog: Story = {
  render: function CommandWithDialog() {
    const [open, setOpen] = useState(false);
    
    return (
      <>
        <Button onClick={() => setOpen(true)}>
          打开命令菜单
        </Button>
        <CommandDialog open={open} onOpenChange={setOpen}>
          <CommandInput placeholder="输入命令或搜索..." />
          <CommandList>
            <CommandEmpty>未找到结果</CommandEmpty>
            <CommandGroup heading="应用">
              <CommandItem>
                <span>仪表盘</span>
              </CommandItem>
              <CommandItem>
                <span>项目</span>
              </CommandItem>
              <CommandItem>
                <span>团队</span>
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="设置">
              <CommandItem>
                <span>个人资料</span>
                <CommandShortcut>⌘P</CommandShortcut>
              </CommandItem>
              <CommandItem>
                <span>账户设置</span>
                <CommandShortcut>⌘S</CommandShortcut>
              </CommandItem>
              <CommandItem>
                <span>通知</span>
                <CommandShortcut>⌘N</CommandShortcut>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </CommandDialog>
      </>
    );
  },
};

export const SearchExample: Story = {
  render: function SearchExample() {
    const [value, setValue] = useState("");
    
    const items = [
      { name: "产品管理", group: "应用" },
      { name: "用户管理", group: "应用" },
      { name: "数据分析", group: "应用" },
      { name: "个人资料", group: "设置" },
      { name: "账户设置", group: "设置" },
      { name: "通知设置", group: "设置" },
      { name: "帮助文档", group: "帮助" },
      { name: "API参考", group: "帮助" },
      { name: "联系支持", group: "帮助" },
    ];
    
    const filteredItems = items.filter((item) => 
      item.name.toLowerCase().includes(value.toLowerCase())
    );
    
    const groupedItems = filteredItems.reduce((acc, item) => {
      if (!acc[item.group]) {
        acc[item.group] = [];
      }
      acc[item.group].push(item);
      return acc;
    }, {} as Record<string, typeof items>);
    
    return (
      <Command className="rounded-lg border shadow-md">
        <CommandInput 
          placeholder="搜索..." 
          value={value}
          onValueChange={setValue}
        />
        <CommandList>
          {filteredItems.length === 0 && <CommandEmpty>未找到结果</CommandEmpty>}
          {Object.entries(groupedItems).map(([group, items]) => (
            <React.Fragment key={group}>
              <CommandGroup heading={group}>
                {items.map((item) => (
                  <CommandItem key={item.name}>
                    <span>{item.name}</span>
                  </CommandItem>
                ))}
              </CommandGroup>
              <CommandSeparator />
            </React.Fragment>
          ))}
        </CommandList>
      </Command>
    );
  },
};
